<html>
<head>
<title>jsCombo Demo</title>
<style>
body {font-family: Helvetica-Neue, sans-serif;}

.jsComboDropdown 
	{
	font-family: Arial, Tahoma, sans-serif;
	font-size: 12px; line-height: auto; padding:0px;
	-moz-border-radius: 5px; -webkit-border-radius: 5px;
	background-color:#daffdb; border:1px solid #32992B;
	}

.jsComboDropdown a {display:block; margin:3px 0px; text-indent:7px;}
.jsComboDropdown a.row            { color:blue; text-decoration:none;}
.jsComboDropdown a.row:link       { color:blue; text-decoration:none;}
.jsComboDropdown a.row:visited    { color:blue; text-decoration:none;}
.jsComboDropdown a.row:active     { color:blue; text-decoration:none;}
.jsComboDropdown a.row:hover      { color:blue; text-decoration:none; background-color:white;}

.jsComboDropdown a.selected_row          { color:white; background-color: #32992B; text-decoration:none;}
.jsComboDropdown a.selected_row:link     { color:white; text-decoration:none;}
.jsComboDropdown a.selected_row:visited  { color:white; text-decoration:none;}
.jsComboDropdown a.selected_row:active   { color:white; text-decoration:none;}
.jsComboDropdown a.selected_row:hover    { color:white; background-color: #32992B; text-decoration:none; }


td {vertical-align:top;}
#log {border:1px solid #dddddd; width:500px; min-height:24px;}
#logToolbar {background-color:#dddddd; border:1px solid #dddddd;}
</style>

<script src='../js/jsCombo.js'></script>
<script>

var Page = 
	{
	onLoad: function()
		{
		// init log console
		// Log.init();

		// use form field name instead of element id
		ComboController.defaultForm = document.form1; 
		}
	};


</script>
</head>
<body onload='Page.onLoad()'>
<iframe id="ifrJsComboBackground" src="javascript:'';" style='position: absolute; display: none; width: 0px; height: 0px' marginwidth="0" marginheight="0" align="bottom" scrolling="no" frameborder="0"></iframe>

<form onsubmit='return false;' name='form1'>

<table>
	<tbody>
		<tr>
			<td>
			<label>
				Filter
				<input autocomplete="off" type='text' name='filter' id='filter' onkeyup='ComboController.onKeyUp(event, "dd1")' onkeydown='ComboController.onKeyDown(event, "dd1")'><br />
			</label>
			<select class="InputText" name="dd1" onchange='Log.debug("New value: " + this.value)'>
				<option value="">-- Please select --</option>
				<option value='1'>Lorem ipsum dolor sit amet</option>
				<option value='2'>consectetur adipiscing elit</option>
				<option value='3'>Vestibulum eu purus tortor</option>
				<option value='4'>ac scelerisque est</option>
				<option value='5'>Proin et leo ut dui ornare ornare</option>
				<option value='6'>Integer id mi metus</option>
				<option value='7'>eget consequat ante</option>
				<option value='8'>Vestibulum malesuada</option>
				<option value='9'>mauris a bibendum vehicula</option>
				<option value='10'>ligula ante vehicula orci</option>
				<option value='11'>eget mollis ligula nisl et odio</option>
				<option value='12'>Class aptent taciti sociosqu ad litora torquent per conubia nostra</option>
				<option value='13'>per inceptos himenaeos</option>
				<option value='14'>Vestibulum cursus adipiscing semper</option>
				<option value='15'>Morbi fringilla turpis vitae lorem sodales congue</option>
				<option value='16'>Nullam sed elit quis dolor gravida rhoncus eu sed lorem</option>
				<option value='17'>Donec velit eros</option>
				<option value='18'>dignissim eget pretium non</option>
				<option value='19'>mattis non dui</option>
				<option value='20'>Maecenas id nunc orci</option>
				<option value='21'>Curabitur faucibus nisi sapien</option>
				<option value='22'>Cras sapien risus</option>
				<option value='23'>faucibus vel mollis nec</option>
				<option value='24'>ultricies non dolor</option>
				<option value='25'>Morbi massa orci</option>
				<option value='26'>rhoncus sit amet mollis quis</option>
				<option value='27'>semper ac augue</option>
				<option value='28'>Proin euismod pharetra felis vitae porta</option>
				<option value='29'>Donec elit urna</option>
				<option value='30'>rutrum at sodales id</option>
				<option value='31'>euismod eget libero</option>
				<option value='32'>Fusce velit elit</option>
				<option value='33'>pharetra vel pharetra in</option>
				<option value='34'>pretium sed urna</option>
				<option value='35'>Fusce eu erat mauris</option>
				<option value='36'>non facilisis eros</option>
				<option value='37'>Aliquam varius risus quis sem aliquet ut elementum libero suscipit</option>
				<option value='38'>Curabitur sit amet justo ante</option>
				<option value='39'>Aliquam sit amet elit erat.</option>
				<option value='40'>Etiam rutrum tortor sed sem ultrices eleifend</option>
				<option value='41'>Morbi bibendum velit id turpis congue a ornare ipsum egestas</option>
				<option value='42'>Vivamus pellentesque libero in eros gravida scelerisque</option>
				<option value='43'>Nullam ac magna nunc</option>
				<option value='44'>Suspendisse faucibus augue eu risus venenatis vel pellentesque ligula aliquet</option>
				<option value='45'>Aliquam a hendrerit tortor</option>
				<option value='46'>Pellentesque sit amet erat arcu</option>
				<option value='47'>Curabitur fermentum rhoncus consectetur</option>
				<option value='48'>Aliquam iaculis tellus sit amet urna congue scelerisque</option>
				<option value='49'>Maecenas scelerisque bibendum augue quis convallis.</option>
				<option value='50'>Phasellus odio lorem</option>
				<option value='51'>tristique quis sollicitudin sit amet</option>
				<option value='52'>condimentum et dolor</option>
				<option value='53'>Morbi eu lacinia metus</option>
				<option value='54'>Suspendisse potenti</option>
				<option value='55'>Pellentesque eu ultrices ante</option>
				<option value='56'>Ut quis lorem leo</option>
				<option value='57'>Sed luctus rhoncus velit</option>
				<option value='58'>a sollicitudin neque semper nec</option>
				<option value='59'>Donec mollis nisi eget quam blandit euismod</option>
				<option value='60'>Class aptent taciti sociosqu ad litora torquent per conubia nostra</option>
				<option value='61'>per inceptos himenaeos</option>
				<option value='62'>Ut faucibus bibendum dui</option>
				<option value='63'>et elementum dolor porta quis</option>
				<option value='64'>Ut consectetur hendrerit dui</option>
				<option value='65'>sit amet egestas est pharetra et</option>
				<option value='66'>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</option>
				<option value='67'>Phasellus volutpat</option>
				<option value='68'>dui et rhoncus fringilla</option>
				<option value='69'>orci erat molestie neque</option>
				<option value='70'>non dignissim nibh massa quis nulla</option>
				<option value='71'>Nullam eget pellentesque metus</option>
				<option value='72'>Phasellus porta mattis quam et lacinia</option>
				<option value='73'>In at diam quis augue faucibus ullamcorper</option>
				<option value='74'>Phasellus rutrum viverra nulla</option>
				<option value='75'>quis gravida arcu placerat id</option>
				<option value='76'>In vestibulum</option>
				<option value='77'>libero et vehicula accumsan</option>
				<option value='78'>magna neque dictum eros</option>
				<option value='79'>quis tempor leo odio in dolor</option>
				<option value='80'>Curabitur hendrerit tempor sem et dapibus</option>
				<option value='81'>Nullam ullamcorper nisi ac lacus lacinia accumsan.</option>
				<option value='82'>Donec sit amet lacus ut mi interdum congue</option>
				<option value='83'>Ut porttitor augue at magna adipiscing dictum</option>
				<option value='84'>Nulla id velit id dui egestas elementum</option>
				<option value='85'>Donec gravida pellentesque gravida</option>
				<option value='86'>Suspendisse potenti</option>
				<option value='87'>Nulla pretium quam eu nibh mollis porta ut id tellus</option>
				<option value='88'>Mauris dignissim bibendum semper</option>
				<option value='89'>Nulla aliquet cursus lorem</option>
				<option value='90'>vel mollis nibh vulputate ac</option>
				<option value='91'>Nam ac erat nec diam commodo aliquam ac in orci</option>
				<option value='92'>Proin in interdum magna</option>
				<option value='93'>Morbi at eros eros</option>
				<option value='94'>et ornare urna</option>
				<option value='95'>Vestibulum suscipit sodales sollicitudin</option>
				<option value='96'>Nullam pellentesque</option>
				<option value='97'>magna vel pellentesque tincidunt</option>
				<option value='98'>erat odio tristique elit</option>
				<option value='99'>faucibus sodales mi elit quis tortor</option>
				<option value='100'>Nulla quam nunc</option>
				<option value='101'>convallis vitae accumsan sit amet</option>
				<option value='102'>aliquam eu elit</option>
				<option value='103'>Morbi ut metus et eros porta elementum</option>
				<option value='104'>Aliquam vel congue mauris</option>
				<option value='105'>Nunc vehicula magna in mauris rhoncus scelerisque</option>
				<option value='106'>Quisque vel risus sapien</option>
				<option value='107'>sed ultricies dui</option>
				<option value='108'>Duis eu pharetra nisl.</option>
				<option value='109'>Morbi mauris odio</option>
				<option value='110'>sodales a convallis quis</option>
				<option value='111'>sollicitudin eget lectus</option>
				<option value='112'>Etiam bibendum sollicitudin ligula</option>
				<option value='113'>sed luctus tortor bibendum at</option>
				<option value='114'>Donec in erat sagittis mauris dictum dignissim</option>
				<option value='115'>Aliquam vitae nisl purus</option>
				<option value='116'>Duis in turpis ac diam viverra tristique</option>
				<option value='117'>Curabitur rutrum</option>
				<option value='118'>mi id luctus facilisis</option>
				<option value='119'>turpis purus condimentum purus</option>
				<option value='120'>sit amet sagittis velit lectus eget mi</option>
				<option value='121'>Nulla quis odio orci</option>
				<option value='122'>aliquam laoreet justo</option>
				<option value='123'>Nam lacus metus</option>
				<option value='124'>pulvinar in imperdiet eu</option>
				<option value='125'>vulputate in diam</option>
				<option value='126'>Nam dolor justo</option>
				<option value='127'>lobortis sed elementum vitae</option>
				<option value='128'>tristique nec felis</option>
				<option value='129'>Etiam purus enim</option>
				<option value='130'>pretium condimentum imperdiet sit amet</option>
				<option value='131'>rutrum sit amet nisl</option>
				<option value='132'>Suspendisse rutrum tincidunt ipsum semper feugiat</option>
				<option value='133'>Ut eu libero felis</option>
				<option value='134'>Donec metus arcu</option>
				<option value='135'>aliquam et ultrices a</option>
				<option value='136'>gravida quis magna</option>
				<option value='137'>Cras in luctus sapien</option>
				<option value='138'>Vestibulum vestibulum est eget nunc volutpat bibendum</option>
				<option value='139'>Pellentesque euismod nunc metus</option>
				<option value='140'>eu porta magna</option>
				<option value='141'>Donec tincidunt porta purus nec pulvinar</option>
				<option value='142'>Phasellus vitae tellus sit amet enim hendrerit mattis</option>
				<option value='143'>Fusce laoreet faucibus blandit</option>
				<option value='144'>Mauris eu eros tellus</option>
				<option value='145'>in hendrerit diam.</option>
			</select> 


			<br /><br /><br />


			<label>
				Filter
				<input autocomplete="off" type='text' name='filter' id='filter' onkeyup='ComboController.onKeyUp(event, "dd2")' onkeydown='ComboController.onKeyDown(event, "dd2")'><br />
			</label>
			<select class="InputText" name="dd2" onchange='Log.debug("New value: " + this.value)'>
				<option value="">-- Please select --</option>
				<option value='1'>Lorem ipsum dolor sit amet</option>
				<option value='2'>consectetur adipiscing elit</option>
				<option value='3'>Vestibulum eu purus tortor</option>
				<option value='4'>ac scelerisque est</option>
				<option value='5'>Proin et leo ut dui ornare ornare</option>
				<option value='6'>Integer id mi metus</option>
				<option value='7'>eget consequat ante</option>
				<option value='8'>Vestibulum malesuada</option>
				<option value='9'>mauris a bibendum vehicula</option>
				<option value='10'>ligula ante vehicula orci</option>
				<option value='11'>eget mollis ligula nisl et odio</option>
				<option value='12'>Class aptent taciti sociosqu ad litora torquent per conubia nostra</option>
				<option value='13'>per inceptos himenaeos</option>
				<option value='14'>Vestibulum cursus adipiscing semper</option>
				<option value='15'>Morbi fringilla turpis vitae lorem sodales congue</option>
				<option value='16'>Nullam sed elit quis dolor gravida rhoncus eu sed lorem</option>
				<option value='17'>Donec velit eros</option>
				<option value='18'>dignissim eget pretium non</option>
				<option value='19'>mattis non dui</option>
				<option value='20'>Maecenas id nunc orci</option>
				<option value='21'>Curabitur faucibus nisi sapien</option>
				<option value='22'>Cras sapien risus</option>
				<option value='23'>faucibus vel mollis nec</option>
				<option value='24'>ultricies non dolor</option>
				<option value='25'>Morbi massa orci</option>
				<option value='26'>rhoncus sit amet mollis quis</option>
				<option value='27'>semper ac augue</option>
				<option value='28'>Proin euismod pharetra felis vitae porta</option>
				<option value='29'>Donec elit urna</option>
				<option value='30'>rutrum at sodales id</option>
				<option value='31'>euismod eget libero</option>
				<option value='32'>Fusce velit elit</option>
				<option value='33'>pharetra vel pharetra in</option>
				<option value='34'>pretium sed urna</option>
				<option value='35'>Fusce eu erat mauris</option>
				<option value='36'>non facilisis eros</option>
				<option value='37'>Aliquam varius risus quis sem aliquet ut elementum libero suscipit</option>
				<option value='38'>Curabitur sit amet justo ante</option>
				<option value='39'>Aliquam sit amet elit erat.</option>
				<option value='40'>Etiam rutrum tortor sed sem ultrices eleifend</option>
				<option value='41'>Morbi bibendum velit id turpis congue a ornare ipsum egestas</option>
				<option value='42'>Vivamus pellentesque libero in eros gravida scelerisque</option>
				<option value='43'>Nullam ac magna nunc</option>
				<option value='44'>Suspendisse faucibus augue eu risus venenatis vel pellentesque ligula aliquet</option>
				<option value='45'>Aliquam a hendrerit tortor</option>
				<option value='46'>Pellentesque sit amet erat arcu</option>
				<option value='47'>Curabitur fermentum rhoncus consectetur</option>
				<option value='48'>Aliquam iaculis tellus sit amet urna congue scelerisque</option>
				<option value='49'>Maecenas scelerisque bibendum augue quis convallis.</option>
				<option value='50'>Phasellus odio lorem</option>
				<option value='51'>tristique quis sollicitudin sit amet</option>
				<option value='52'>condimentum et dolor</option>
				<option value='53'>Morbi eu lacinia metus</option>
				<option value='54'>Suspendisse potenti</option>
				<option value='55'>Pellentesque eu ultrices ante</option>
				<option value='56'>Ut quis lorem leo</option>
				<option value='57'>Sed luctus rhoncus velit</option>
				<option value='58'>a sollicitudin neque semper nec</option>
				<option value='59'>Donec mollis nisi eget quam blandit euismod</option>
				<option value='60'>Class aptent taciti sociosqu ad litora torquent per conubia nostra</option>
				<option value='61'>per inceptos himenaeos</option>
				<option value='62'>Ut faucibus bibendum dui</option>
				<option value='63'>et elementum dolor porta quis</option>
				<option value='64'>Ut consectetur hendrerit dui</option>
				<option value='65'>sit amet egestas est pharetra et</option>
				<option value='66'>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</option>
				<option value='67'>Phasellus volutpat</option>
				<option value='68'>dui et rhoncus fringilla</option>
				<option value='69'>orci erat molestie neque</option>
				<option value='70'>non dignissim nibh massa quis nulla</option>
				<option value='71'>Nullam eget pellentesque metus</option>
				<option value='72'>Phasellus porta mattis quam et lacinia</option>
				<option value='73'>In at diam quis augue faucibus ullamcorper</option>
				<option value='74'>Phasellus rutrum viverra nulla</option>
				<option value='75'>quis gravida arcu placerat id</option>
				<option value='76'>In vestibulum</option>
				<option value='77'>libero et vehicula accumsan</option>
				<option value='78'>magna neque dictum eros</option>
				<option value='79'>quis tempor leo odio in dolor</option>
				<option value='80'>Curabitur hendrerit tempor sem et dapibus</option>
				<option value='81'>Nullam ullamcorper nisi ac lacus lacinia accumsan.</option>
				<option value='82'>Donec sit amet lacus ut mi interdum congue</option>
				<option value='83'>Ut porttitor augue at magna adipiscing dictum</option>
				<option value='84'>Nulla id velit id dui egestas elementum</option>
				<option value='85'>Donec gravida pellentesque gravida</option>
				<option value='86'>Suspendisse potenti</option>
				<option value='87'>Nulla pretium quam eu nibh mollis porta ut id tellus</option>
				<option value='88'>Mauris dignissim bibendum semper</option>
				<option value='89'>Nulla aliquet cursus lorem</option>
				<option value='90'>vel mollis nibh vulputate ac</option>
				<option value='91'>Nam ac erat nec diam commodo aliquam ac in orci</option>
				<option value='92'>Proin in interdum magna</option>
				<option value='93'>Morbi at eros eros</option>
				<option value='94'>et ornare urna</option>
				<option value='95'>Vestibulum suscipit sodales sollicitudin</option>
				<option value='96'>Nullam pellentesque</option>
				<option value='97'>magna vel pellentesque tincidunt</option>
				<option value='98'>erat odio tristique elit</option>
				<option value='99'>faucibus sodales mi elit quis tortor</option>
				<option value='100'>Nulla quam nunc</option>
				<option value='101'>convallis vitae accumsan sit amet</option>
				<option value='102'>aliquam eu elit</option>
				<option value='103'>Morbi ut metus et eros porta elementum</option>
				<option value='104'>Aliquam vel congue mauris</option>
				<option value='105'>Nunc vehicula magna in mauris rhoncus scelerisque</option>
				<option value='106'>Quisque vel risus sapien</option>
				<option value='107'>sed ultricies dui</option>
				<option value='108'>Duis eu pharetra nisl.</option>
				<option value='109'>Morbi mauris odio</option>
				<option value='110'>sodales a convallis quis</option>
				<option value='111'>sollicitudin eget lectus</option>
				<option value='112'>Etiam bibendum sollicitudin ligula</option>
				<option value='113'>sed luctus tortor bibendum at</option>
				<option value='114'>Donec in erat sagittis mauris dictum dignissim</option>
				<option value='115'>Aliquam vitae nisl purus</option>
				<option value='116'>Duis in turpis ac diam viverra tristique</option>
				<option value='117'>Curabitur rutrum</option>
				<option value='118'>mi id luctus facilisis</option>
				<option value='119'>turpis purus condimentum purus</option>
				<option value='120'>sit amet sagittis velit lectus eget mi</option>
				<option value='121'>Nulla quis odio orci</option>
				<option value='122'>aliquam laoreet justo</option>
				<option value='123'>Nam lacus metus</option>
				<option value='124'>pulvinar in imperdiet eu</option>
				<option value='125'>vulputate in diam</option>
				<option value='126'>Nam dolor justo</option>
				<option value='127'>lobortis sed elementum vitae</option>
				<option value='128'>tristique nec felis</option>
				<option value='129'>Etiam purus enim</option>
				<option value='130'>pretium condimentum imperdiet sit amet</option>
				<option value='131'>rutrum sit amet nisl</option>
				<option value='132'>Suspendisse rutrum tincidunt ipsum semper feugiat</option>
				<option value='133'>Ut eu libero felis</option>
				<option value='134'>Donec metus arcu</option>
				<option value='135'>aliquam et ultrices a</option>
				<option value='136'>gravida quis magna</option>
				<option value='137'>Cras in luctus sapien</option>
				<option value='138'>Vestibulum vestibulum est eget nunc volutpat bibendum</option>
				<option value='139'>Pellentesque euismod nunc metus</option>
				<option value='140'>eu porta magna</option>
				<option value='141'>Donec tincidunt porta purus nec pulvinar</option>
				<option value='142'>Phasellus vitae tellus sit amet enim hendrerit mattis</option>
				<option value='143'>Fusce laoreet faucibus blandit</option>
				<option value='144'>Mauris eu eros tellus</option>
				<option value='145'>in hendrerit diam.</option>
			</select> <br />
			
			
			</td>
			<td>
				<!-- 
				<div id='logToolbar'><a href='javascript:Log.clear()'>Clear logs</a></div>
				<div id='log'></div>
				 -->
			</td>
		</tr>
	</tbody>
</table>

</form>
</body>
</html>